<template>
  <view class="container">
    <view class="search-wrapper">
      <view class="search-input">
        <view class="search-input-wrapper">
          <view class="left">
            <text class="search-icon iconfont icon-search"></text>
          </view>
          <view class="right">
            <input
              v-model="searchValue"
              class="input"
              focus="true"
              placeholder="请输入您搜索的商品"
              type="text"
            />
          </view>
        </view>
      </view>
      <view class="search-button">
        <view class="button" @click="onSearch">搜索</view>
      </view>
    </view>
    <view class="history" v-if="historySearch.length">
      <view class="his-head">
        <text class="title">最近搜索</text>
        <text class="icon iconfont icon-delete" @click="clearSearch"></text>
      </view>
      <view class="his-list">
        <view
          class="his-item"
          v-for="(val, index) in historySearch"
          :key="index"
        >
          <view class="history-button" @click="handleQuick(val)">{{
            val
          }}</view>
        </view>
      </view>
    </view>
    <!-- </view> -->
  </view>
</template>

<script>
const HISTORY_SEARCH = 'historySearch';

export default {
  data() {
    return {
      historySearch: [],
      searchValue: '',
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 获取历史搜索
    this.historySearch = this.getHistorySearch();
  },

  methods: {
    /**
     * 获取历史搜索
     */
    getHistorySearch() {
      return uni.getStorageSync(HISTORY_SEARCH) || [];
    },

    /**
     * 搜索提交
     */
    onSearch() {
      const { searchValue } = this;
      if (searchValue) {
        // 记录历史搜索
        this.setHistory(searchValue);
        // 跳转到商品列表页
        this.$navTo('pages/goods/list', {
          search: searchValue,
        });
      }
    },

    /**
     * 记录历史搜索
     */
    setHistory(searchValue) {
      const data = this.getHistorySearch();
      const index = data.indexOf(searchValue);
      index > -1 && data.splice(index, 1);
      data.unshift(searchValue);
      this.historySearch = data;
      this.onUpdateStorage();
    },

    /**
     * 清空最近搜索记录
     */
    clearSearch() {
      this.historySearch = [];
      this.onUpdateStorage();
    },

    /**
     * 更新历史搜索缓存
     * @param {Object} data
     */
    onUpdateStorage(data) {
      uni.setStorageSync(HISTORY_SEARCH, this.historySearch);
    },

    /**
     * 跳转到最近搜索
     */
    handleQuick(search) {
      this.$navTo('pages/goods/list', {
        search,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  min-height: 100vh;
  background: #f7f7f7;
}

.search-wrapper {
  display: flex;
  height: 64rpx;
}

// 搜索输入框
.search-input {
  width: 80%;
  background: #fff;
  border-radius: 10rpx 0 0 10rpx;
  box-sizing: border-box;
  overflow: hidden;

  .search-input-wrapper {
    display: flex;

    .left {
      display: flex;
      width: 60rpx;
      justify-content: center;
      align-items: center;

      .search-icon {
        display: block;
        color: #b4b4b4;
        font-size: 28rpx;
      }
    }

    .right {
      flex: 1;

      input {
        font-size: 28rpx;
        height: 64rpx;
        display: flex;
        align-items: center;

        .input-placeholder {
          color: #aba9a9;
        }
      }
    }
  }
}

// 搜索按钮
.search-button {
  width: 20%;
  box-sizing: border-box;

  .button {
    height: 64rpx;
    font-size: 28rpx;
    border-radius: 0 10rpx 10rpx 0;
    background: #fa2209;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// 最近搜索
.history {
  .his-head {
    font-size: 28rpx;
    padding: 50rpx 0 0 0;
    color: #777;

    .icon {
      float: right;
    }
  }

  .his-list {
    padding: 20rpx 0;
    overflow: hidden;

    .his-item {
      width: 33.3%;
      float: left;
      padding: 10rpx;
      box-sizing: border-box;

      .history-button {
        text-align: center;
        padding: 14rpx;
        line-height: 30rpx;
        border-radius: 100rpx;
        background: #fff;
        font-size: 26rpx;
        border: 1rpx solid #efefef;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
